<template>
  <div class="header">
    <!-- 头部 -->
    <div class="header-inner">
      <!-- logo -->
      <a class="header-logo" href=""></a>
      <!-- 导航栏 -->
      <el-menu class="el-menu-demo header-nav" mode="horizontal" router>
        <el-menu-item index="1" class="active">首页</el-menu-item>
        <el-submenu index="2">
          <template slot="title">产品服务</template>
          <!-- 子栏目 -->
          <div class="Sub-col">
            <div class="sub-col-item">
              <p class="sub-col-item-title">
                <i></i>
                产品介绍
              </p>
              <ul>
                <li class="nav-item">
                  <a href="">当天达</a>
                </li>
                <li class="nav-item">
                  <a href="">次日达</a>
                </li>
                <li class="nav-item">
                  <a href="">隔日达</a>
                </li>
                <li class="nav-item">
                  <a href="">陆运件</a>
                </li>
                <li class="nav-item">
                  <a href="">同城即日</a>
                </li>
                <li class="nav-item">
                  <a href="">同城次日</a>
                </li>
                <li class="nav-item">
                  <a href="">省内即日</a>
                </li>
                <li class="nav-item">
                  <a href="">省内次日</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="Sub-col">
            <div class="sub-col-item">
              <p class="sub-col-item-title">
                <i></i>
                增值服务
              </p>
              <ul>
                <li class="nav-item">
                  <a href="">保价服务</a>
                </li>
                <li class="nav-item">
                  <a href="">包装服务</a>
                </li>
                <li class="nav-item">
                  <a href="">签收回单</a>
                </li>
                <li class="nav-item">
                  <a href="">夜间取派</a>
                </li>
                <li class="nav-item">
                  <a href="">代收货款</a>
                </li>
              </ul>
              <i class="Sub-col-line"></i>
            </div>
          </div>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">客户服务</template>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">热门活动</template>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">新闻公告</template>
        </el-submenu>
        <el-submenu index="6">
          <template slot="title">走进跨越</template>
          <el-menu-item-group>
            <el-menu-item index="/enterprise/kye-about">企业介绍 </el-menu-item>
            <el-menu-item index="/enterprise/invite-school"
              >加入我们</el-menu-item
            >
            <el-menu-item index="/enterprise/contact-us">联系我们</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="7">
          <template slot="title">集团采购</template>
          <el-menu-item-group>
            <el-menu-item index="/groupPurchasing/concept"
              >采购理念
            </el-menu-item>
            <el-menu-item index="/groupPurchasing/conduct"
              >采购行为准则</el-menu-item
            >
            <el-menu-item index="/groupPurchasing/needKnow"
              >供应商需知</el-menu-item
            >
            <el-menu-item index="/groupPurchasing/demand"
              >采购需知</el-menu-item
            >
            <el-menu-item index="/groupPurchasing/supplier"
              >供应商自荐</el-menu-item
            >
            <el-menu-item index="/groupPurchasing/feedback"
              >意见与反馈</el-menu-item
            >
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
      <!-- 个人中心、登录/注册 -->
      <div class="header-login">
        <div class="user-start">
          <a href="" class="header-nav-a">个人中心</a>
        </div>
        <div class="user-start">
          <a href="/login" class="header-nav-a">登录</a>
          <i class="header-feature-line"></i>
          <a href="" class="header-nav-a">注册</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss">
#app {
  padding-top: var(--header-height);
}
// 头部
.header {
  background-color: #fff;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  width: 100%;
  > .header-inner {
    width: var(--container-width);
    margin: 0 auto;
    // LOGO
    > .header-logo {
      text-decoration: none;
      display: inline-block;
      height: 41px;
      width: 165px;
      margin-top: 20px;
      background: url(@/assets/img/index/logo-purple.svg) no-repeat;
    }
    // 导航栏
    > .header-nav {
      display: inline-block;
      vertical-align: top;
      height: 80px;
      margin-left: 30px;
      border-bottom: none;
      > .el-menu-item {
        padding: 0 16px;
        line-height: 80px;
        height: 80px;
        cursor: pointer;
        font-size: 16px;
        &.active {
          color: var(--font-color);
        }
      }
      .el-submenu__title {
        padding: 0 16px;
        line-height: 80px;
        height: 80px;
        font-size: 16px;
        color: #333;
        &:hover {
          color: var(--font-color);
        }
      }
    }
    // 个人中心、登录/注册
    > .header-login {
      float: right;
      margin-top: 30px;
      display: flex;
      > .user-start {
        margin-right: 25px;
        // display: none;
        > .header-nav-a:hover {
          color: var(--font-color);
          transition: 0.35s;
        }
        > .header-feature-line {
          border-left: solid 1px #333333;
          position: relative;
          display: inline-block;
          margin: 0 10px;
          top: 0px;
          width: 1px;
          height: 12px;
        }
      }
    }
  }
}

// 下拉子栏目
.el-menu--popup-bottom-start {
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border: 1px solid #ebeef5;
  border-radius: 4px;
  // 子栏目业务列
  .Sub-col {
    margin-bottom: 30px;
    padding: 30px 0 0 0;
    > .sub-col-item {
      width: 180px;
      > .sub-col-item-title {
        padding-bottom: 10px;
        padding-left: 50px;
        > i {
        }
      }
      > ul {
        > .nav-item {
          padding: 20px 0 0 50px;
          > a {
            font-size: 14px;
            &:hover {
              color: var(--font-color);
            }
          }
        }
      }
      // 分隔线
      > .Sub-col-line {
        position: absolute;
        top: 46px;
        height: 80%;
        display: inline-block;
        border-right: solid 1px #e9e8e8;
      }
    }
  }
}

// 去除导航栏组件箭头
.el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}

.el-submenu > .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}
</style>
